<template>
  <div>
    给 v-bind:class 一个对象，以动态地切换 class，
    语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 Boolean 值，大致语法 {className:Boolean}
    <br>
    <!-- 数组语法绑定 class   当isActive为true时，active就成成span标签的class -->
    <span class="static" v-bind:class="{'active':isActive,'red-bg':isRed}"
    >syl</span
    >
    <!-- isActive 为true 渲染后 <span class="static active red-bg">syl</span> -->
  </div>
</template>

<script>
export default {
  name: "bind-class",
  data(){
    return{
      isActive: true,
      isRed: true,
    }
  }

}
</script>

<style scoped>
.active {
  color: pink;
  font-size: 22px;
}

.red-bg {
  background: red;
}
</style>
